<template>
  <view class="container">
    <view class="user-section">
      <view class="user-bg"></view>
      <view class="user-header">
        <view class="user-avatar" @click="gotoPath('/pages/setting/safe/avatar',true)">
          <image class="avatar-img" :src="userInfo.avatar || '/static/missing-face.png'" mode="aspectFill"></image>
          <view class="avatar-overlay"></view>
        </view>
        <view class="user-info">
          <view v-if="hasLogin" @click="gotoPath('/pages/setting/safe/avatar',true)">
            <text class="username">{{ userInfo.nick_name || '游客' }}</text>
            <text @click.native.stop="gotoPath('/pages/setting/safe/cancel_account',true)" 
                  v-if="userInfo.cancel_expire" class="cancel-text">（即将注销）</text>
          </view>
          <view v-else @click="goToLoginPage()">
            <text class="login-text">点击登录</text>
          </view>
          <view class="user-id" v-if="hasLogin">
            ID: {{ userInfo.user_id }}
          </view>
        </view>
        <view class="setting-btn" @click="gotoPath('/pages/setting/index',false)">
          <u-icon name="setting" size="48" color="#fff"></u-icon>
        </view>
      </view>
    </view>

    <!-- 订单统计 -->
    <view class="order-stats">
      <view class="stats-header">
        <text class="stats-title">我的订单</text>
        <view class="more-btn" @click="gotoPath('/pages/packageA/order/index',true)">
          <text>查看全部</text>
          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
        </view>
      </view>
      <view class="stats-grid">
        <view 
          v-for="(item, index) in order_data" 
          :key="index" 
          class="stats-item"
          @click="gotoPath(`/pages/packageA/order/index?type=${item.type}`,true)"
        >
          <view class="stats-icon-wrapper">
            <u-icon :name="item.icon||'order'" :size="40" :color="getIconColor(index)"></u-icon>
          </view>
          <u-badge 
            v-if="item.value > 0" 
            :count="item.value" 
            :absolute="false" 
            class="stats-badge"
          ></u-badge>
          <text class="stats-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <u-cell-group>
        <u-cell-item 
          @click="gotoPath('/pages/packageA/order/index')" 
          title="我的订单" 
          icon="order"
          :icon-style="{color: '#42b479'}"
        >
          <u-badge 
            v-show="hasLogin && userInfo.order_count > 0" 
            :count="userInfo.order_count" 
            :absolute="false"
            slot="right-icon"
            type="error"
          ></u-badge>
        </u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/user/center')" 
          title="会员中心" 
          icon="integral" 
          :icon-style="{color: '#edb121'}"
        ></u-cell-item>

        <u-cell-item 
          @click="gotoPath('/pages/packageA/msg/index')" 
          title="系统消息" 
          icon="bell"
          :icon-style="{color: '#ff6b6b'}"
        >
          <u-badge 
            v-show="hasLogin && unreadCount > 0" 
            :count="unreadCount" 
            :absolute="false"
            slot="right-icon"
            type="error"
          ></u-badge>
        </u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/address/index')" 
          title="收货地址" 
          icon="map"
          :icon-style="{color: '#4285f4'}"
        ></u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/coupon/my')" 
          title="优惠券" 
          icon="coupon"
          :icon-style="{color: '#ff4757'}"
        >
          <u-badge 
            v-show="hasLogin && userInfo.coupon_count > 0" 
            :count="userInfo.coupon_count" 
            :absolute="false"
            slot="right-icon"
            type="error"
          ></u-badge>
        </u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/collect/index')" 
          title="我的收藏" 
          icon="heart"
          :icon-style="{color: '#ff6b81'}"
        ></u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/invoice/index')" 
          title="发票管理" 
          icon="rmb-circle"
          :icon-style="{color: '#2ed573'}"
        ></u-cell-item>
        
        <u-cell-item 
          @click="gotoPath('/pages/packageA/kefu/index')" 
          title="客服" 
          icon="server-man"
          :icon-style="{color: '#3742fa'}"
        >
          <u-badge 
            v-show="hasLogin && userInfo.kefuMsgCount > 0" 
            :count="userInfo.kefuMsgCount" 
            :absolute="false"
            slot="right-icon"
            type="error"
          ></u-badge>
        </u-cell-item>
      </u-cell-group>
    </view>

    <!-- 扩展插件 -->
    <view class="extend-section" v-if="plugins_list.length > 0">
      <u-cell-group>
        <u-cell-item title="更多功能" icon="grid" :icon-style="{color: '#747d8c'}"></u-cell-item>
      </u-cell-group>
      <view class="extend-grid">
        <u-grid :col="4" v-for="(item, index) in plugins_list" :key="index">
          <u-grid-item @click="gotoPath(item.path)">
            <u-icon :name="item.icon" :size="50" :color="getPluginIconColor(index)"></u-icon>
            <text class="grid-text">{{ item.name }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>

<script>
import order_api from "@/common/order_api";

export default {
  components: {},
  data() {
    return {
      order_data: {},
      plugins_list: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.user
    },
    unreadCount() {
      return this.$store.getters.unread_count || 0
    }

  },
  methods: {
    getOrderCount() {
      order_api.order_data().then(res => {
        this.order_data = res.data
      })
    },
    
    // 获取订单状态图标颜色
    getIconColor(index) {
      const colors = ['#42b479', '#ff6b6b', '#4285f4', '#ff9f43', '#ff4757'];
      return colors[index % colors.length];
    },
    
    // 获取插件图标颜色
    getPluginIconColor(index) {
      const colors = ['#42b479', '#ff6b6b', '#4285f4', '#ff9f43', '#ff4757', '#a55eea', '#2ed573', '#3742fa'];
      return colors[index % colors.length];
    }

  },
  onLoad(options) {

  },
  onShow() {
    if (this.hasLogin) {
      this.$store.dispatch('getUserInfo')
      this.getOrderCount()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './user.scss';
</style>